<template>
  <div class="container index">
    <van-dialog
            v-model="show"
            show-cancel-button
            :beforeClose="beforeClose"
    >
      <van-cell-group>
        <van-radio-group v-model="radio">
          <van-radio name="0">不匿名</van-radio>
          <van-radio name="1">匿名</van-radio>
        </van-radio-group>
      </van-cell-group>
        <van-field
                v-model="store_code"
                label="捐款单位"
                placeholder="请输入捐款单位"
        />
        <van-field
                v-model="jz_price"
                label="金额"
                placeholder="请输入金额"
        />
        <van-field
                v-model="name"
                label="姓名"
                placeholder="请输入姓名"
        />
        <van-field
                v-model="mobile"
                label="电话"
                placeholder="请输入电话"
        />
    </van-dialog>
    <div class="bg-color"></div>
    <div class="my-body">
      <img
        src="http://city-card.oss-cn-hangzhou.aliyuncs.com/guarantee_medical/fyyl_ad.png"
        class="hd-img-responsive header-img hd-shadow"
      >
      <div class="my-display hd-shadow">
        <van-row>
          <van-col span="12" class="van-hairline--right">
            <div class="title">垫付医疗欠款</div>
            <div class="num">
              <em>¥</em>{{info.sy_price}}
            </div>
            <div class="btn">立即还款</div>
          </van-col>
          <van-col span="12">
            <div class="title">垫付医疗捐赠</div>
            <div class="num">
              <em>¥</em>{{info.jz_price}}
            </div>
            <div class="btn" @click="medicalcreate()">我要捐款</div>
          </van-col>
        </van-row>
      </div>
      <div class="opt-group">
        <a class="opt-item top" href="#/guarantee_medical_hospital">
          <img
            src="http://city-card.oss-cn-hangzhou.aliyuncs.com/guarantee_medical/hospital_list_btn.png"
            class="hd-img-responsive"
          >
        </a>
        <a class="opt-item top" href="#/guarantee_medical_tips">
          <img
            src="http://city-card.oss-cn-hangzhou.aliyuncs.com/guarantee_medical/use_book_btn.png"
            class="hd-img-responsive"
          >
        </a>
        <a class="opt-item" href="#/guarantee_medical_record">
          <img
            src="http://city-card.oss-cn-hangzhou.aliyuncs.com/guarantee_medical/record_list_btn.png"
            class="hd-img-responsive"
          >
        </a>
        <a class="opt-item" href="#/guarantee_medical_fund">
          <img
            src="http://city-card.oss-cn-hangzhou.aliyuncs.com/guarantee_medical/fund_list_btn.png"
            class="hd-img-responsive"
          >
        </a>
      </div>
      <div class="desc hd-article">
        <img src="http://city-card.oss-cn-hangzhou.aliyuncs.com/guarantee_medical/tip_logo.png" class="tip-logo"/>
        <div class="title">垫付医疗保障简介</div>
        <p>
          <strong>保障金来源</strong>
        </p>
        <p>社会爱心企业,爱心人士捐赠资金,社会爱心企业,爱心人士捐赠商品,义卖筹集资金,受保障对象,年度一元捐活动募集资金。</p>
        <p>
          <strong>保障金用途</strong>
        </p>
        <p>为旅游过程中或日常生活中突发危害,重症的市民游客提供急诊费,急救费垫付服务,保障第一时间送医,第一时间治疗,救危救急,救命救残。</p>
        <p>
          <strong>保障金管理</strong>
        </p>
        <p>网络化公开公示捐赠企业,捐赠商品,捐赠资金情况,网络化公开公示垫付医疗保障金救助使用情况,联合银行及媒体共同监管,捐赠企业,市民游客即时查看,自由查询。</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'guarantee_medical',
  data () {
    return {
      value: 1,
      info: {},
      show: false,
      radio: '0',
      store_code: '',
      jz_price: '',
      name: '',
      mobile: ''
    }
  },
  methods: {
    init () {
      this.$http({
        fun: 'medicalprice',
        requestType: 'get',
        cb: res => {
          console.log(res)
          this.info = res
        }
      })
      this.$http({
        fun: 'mnlogin',
        requestType: 'get',
        cb: res => {
          console.log(res)
        }
      })
    },
    beforeClose (action, done) {
      if (action === 'confirm') {
        setTimeout(done, 1000)
        console.log('ssssss')
        console.log(this.store_code)
        console.log(this.radio)
        this.$http({
          fun: 'medicalcreate',
          store_code: this.store_code,
          price: this.jz_price,
          name: this.name,
          mobile: this.mobile,
          mode: this.radio,
          cb: res => {
            console.log(res)
            this.info = res
          }
        })
      } else if (action === 'cancel') {
        done() // 关闭
      }
    },
    medicalcreate () {
      console.log('11111')
      this.show = true
      this.store_code = ''
      this.jz_price = ''
      this.name = ''
      this.mobile = ''
      this.radio = '0'
    }
  },

  mounted () {
    this.init()
  }
}
</script>

<style src="./index.css" scoped>
</style>
